<template>
  <el-container>
    <el-main class="popup_content">
      <el-form ref="editPromotion" :model="editPromotion" :rules="rules"  label-width="90px">
        <div style="display: flex">
        <el-form-item label="类型" prop="type" style="width: 300px" >
          <span>{{editPromotion.type|watchType}}</span>
        </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item label="促销标题" style="width: 600px"  prop="title" v-if="editPromotion.type!=6&&editPromotion.type!=3&&editPromotion.type!=4">

          <el-input v-model="editPromotion.title" placeholder="请输入促销标题"></el-input>

        </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item label="消费金额" prop="minimumPrice" style="width: 300px"
                      v-if="editPromotion.type===4||editPromotion.type===5||editPromotion.type===6||editPromotion.type===3||editPromotion.type===1">

          <el-input v-model="editPromotion.minimumPrice"  type="number"  placeholder="如消费满100元生效"></el-input>

        </el-form-item>
        </div>
        <div style="display: flex">
            <el-form-item label="满折比例" style="width: 300px"  prop="agioRate" v-if="editPromotion.type===4">

              <el-input v-model="editPromotion.agioRate"  type="number"   placeholder="如满100 9折"></el-input>

            </el-form-item>
            <el-form-item style="width: 300px"  :label="editPromotion.type |watchAmountType" prop="amount" v-if="editPromotion.type===3||editPromotion.type===7">

              <el-input v-model="editPromotion.amount"  type="number"  placeholder="请输入金额"></el-input>

            </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item label="促销主图" prop="thumbnail" v-if="editPromotion.type===0||editPromotion.type===2" >
          <single-upload :key="Math.random()" v-model="editPromotion.thumbnail"></single-upload>
        </el-form-item>
        </div>
        <div style="display: flex">
          <el-col :span="4">
            <el-form-item label="" prop="firsted"
                          v-if="editPromotion.type===3||editPromotion.type===5||editPromotion.type===4||editPromotion.type===1">
              <el-checkbox v-model="editPromotion.firsted">只适用于首单生效</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" prop="overlying"
                          v-if="editPromotion.type===3||editPromotion.type==5||editPromotion.type===4||editPromotion.type===1">
              <el-checkbox v-model="editPromotion.overlying">活动是否跟其他优惠叠加</el-checkbox>
            </el-form-item>
          </el-col>
        </div>
        <div style="display: flex" v-if="editPromotion.type===0||editPromotion.type===1||editPromotion.type===2||editPromotion.type===5&& editPromotion.gifts.length>0">

            <el-form-item label="赠品类型" prop="giftType" style="width: 300px" >
              <el-select v-model="editPromotion.giftType" >
                <el-option label="礼品" :value="Number(0)" v-if="editPromotion.type!=0"></el-option>
                <el-option label="优惠券" :value="Number(1)"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item>
            <el-button v-if="editPromotion.giftType===0" type="primary" @click="addGift('编辑')">添加</el-button>
            <el-button v-if="editPromotion.giftType===1" type="primary" @click="addCoupon('编辑')">添加</el-button>
          </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item style="width: 600px">
        <editGift :editGiftType="editPromotion.giftType" :editGift="editPromotion.gifts"  v-if="editPromotion.giftType===0" :isStatus="0" ref="editChild"></editGift>
        </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="width: 600px">
        <editCoupon v-if="editPromotion.giftType===1" :editCoupon="editPromotion.gifts" :editGiftType="editPromotion.giftType" :isStatus="0"  ref="editCouponAdd"></editCoupon>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="投放次数" prop="stock" style="width: 295px" v-if="editPromotion.type==2">

            <el-input v-model="editPromotion.stock"  type="number" ></el-input>

          </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item label="起始日期"  style="width: 600px">
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>

        </el-form-item>
        </div>
        <div style="display: flex">
        <el-form-item label="促销说明" prop="introduction"  style="width: 600px">

          <el-input v-model="editPromotion.introduction" placeholder="请输入促销说明"></el-input>

        </el-form-item>
        </div>
        <el-form-item>
          <el-col>
            <el-button type="primary" :loading="clicked" @click="updatePromotion('editPromotion')">确 定</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {EventBus} from '@/api/eventBus'
  import giftList from './components/gift'
  import coupon from './components/coupon'
  import editGift from './components/editGift'
  import SingleUpload from '@/components/Upload/singleUpload'
  import editCoupon from './components/editCoupon'
  import { find, update } from '../../api/promotion'

  export default {
    name: 'promotion-edit',
    data(){
      return{
        dateTime:[],
        clicked:false,
        giftTypeList:[],
        editPromotion:{
          id:'',
          agioRate:'',
          amount:'',
          firsted:false,
          giftType:'',
          gifts:[
            {
              promotionId:'',
              giftId:'',
              availableQuantity:0,
              giftName:'',
              quantity:0}
          ],
          introduction:'',
          stock:0,
          minimumPrice:'',
          modifyDate:'',
          orders:0,
          overlying:false,
          thumbnail:'',
          title:'',
          type:0
        },
        rules: {
          type:[ {required: true, message: '请输入选择类型', trigger: 'change'},],
          agioRate:[
            {required: true, message: '请输入满减比例', trigger: 'blur'},
          ],
          amount:[
            {required: true, message: '请输入金额', trigger: 'blur'},
          ],
          title:[
            {required: true, message: '请输入促销标题', trigger: 'blur'},
          ],
          minimumPrice:[
            {required: true, message: '请输入数量', trigger: 'blur'},
          ],
          memo:[
            {required: true, message: '请输入等级描述', trigger: 'blur'},
          ],
          enterpriseId:[
            {required: true, message: '请输入所属企业', trigger: 'blur'},
          ],
          integer:[
            {required: true, message: '请输入优先级', trigger: 'blur'},
          ],
          introduction:[
            {required: true, message: '请输入促销说明', trigger: 'blur'},
          ],
        },
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='promotion-edit' && newVal.query.id!=this.id) {
          this.findPromotion()
        }
      }
    },
    methods:{
      addGift(type){
        type==="添加"?this.$refs.child.add():this.$refs.editChild.add();
      },
      addCoupon(type){
        type=="添加"?this.$refs.couponAdd.add():this.$refs.editCouponAdd.add()
      },
      updatePromotion(editPromotion){
        this.$refs[editPromotion].validate((valid) =>{
          if (valid){
            this.clicked=true
            var editPromotion={
              id:this.editPromotion.id,
              agioRate:this.editPromotion.agioRate,
              amount:this.editPromotion.amount,
              stock:this.editPromotion.stock,
              firsted:this.editPromotion.firsted,
              giftType:this.editPromotion.giftType,
              gifts:[],
              beginDate:'',
              endDate:'',
              status:0,
              introduction:this.editPromotion.introduction,
              minimumPrice:this.editPromotion.minimumPrice,
              modifyDate:new Date(),
              orders:this.editPromotion.orders,
              overlying:this.editPromotion.overlying,
              thumbnail:this.editPromotion.thumbnail,
              title:this.editPromotion.title,
              type:this.editPromotion.type
            }
            if (this.editPromotion.type!=0&&this.editPromotion.type!=1&&this.editPromotion.type!=2&&this.editPromotion.type!=5){
              this.giftTypeList=[]
            }else{
              if (this.editPromotion.giftType===0){
                if (this.$refs.editChild.gifts.length&&this.$refs.editChild.gifts.length>0){
                  this.giftTypeList=this.$refs.editChild.gifts
                }else{
                  this.giftTypeList=[]
                }
              }else if (this.editPromotion.giftType===1){
                if (this.$refs.editCouponAdd.coupons&&this.$refs.editCouponAdd.coupons.length>0){
                  this.giftTypeList=this.$refs.editCouponAdd.coupons
                }else{
                  this.giftTypeList=[]
                }
              }
            }
            editPromotion.gifts=this.giftTypeList
            if(this.dateTime.length >0){
              editPromotion.beginDate = this.dateTime[0];
              editPromotion.endDate = this.dateTime[1]
            }
            if (this.editPromotion.type===6){
              editPromotion.title='满'+editPromotion.minimumPrice+'包邮'
            }else if (this.editPromotion.type===3){
              editPromotion.title='满'+editPromotion.minimumPrice+'减'+editPromotion.amount
            }else if (this.editPromotion.type===4){
              editPromotion.title='满'+Number(editPromotion.minimumPrice).toFixed(0)+'打'+editPromotion.agioRate+'折'
            }
          console.log(editPromotion)
            update(editPromotion).then(response =>{
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                this.$router.push({
                  path: '/promotion/list'
                })
              })
              EventBus.$emit('promotion-edit', response.data)
            }).catch(error =>{
              this.editVisible = false;
              console.log('error')
            })
          }else{
            this.editVisible = false;
          }
        })
      },
      findPromotion(){
        this.editPromotion.id = this.$route.query.id;
        find(this.editPromotion.id).then(response =>{
          this.editPromotion=response.data.promotion;
          this.dateTime.push(this.editPromotion.beginDate);
          this.dateTime.push(this.editPromotion.endDate);
          console.log(this.editPromotion)
        })
      },
    },
    created() {
      this.findPromotion()
    },
    filters:{
      watchType(val){
        const  typeName=['弹屏活动','消费送','扫码活动','满减','满折','满赠','满包邮','充值送'];
        return typeName[val];
      },
      watchAmountType(val){
        if (val==3){
          return '满减金额'
        }else if (val==7){
          return '充值金额'
        }
      }
    },
    components:{SingleUpload,giftList,coupon,editGift,editCoupon},
  }
</script>

<style scoped>

</style>
